<template>
  <div class="setting-main">
    <div class="setting-title">
      <div class="title-left">
        [1]
      </div>
      <div class="title-right">
        压力设置
      </div>
    </div>
    <div class="table-frame">
      <!-- <loading v-show="runFlag" /> -->
      <settingCard :data="data" :system="system" :out-pressure="outPressure" class="setting-panel" />
    </div>
    <div class="setting-title">
      <div class="title-left">
        [2]
      </div>
      <div class="title-right">
        荷载分布图
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    settingCard: () => import('./SettingCard.vue')
    // loading: () => import('@/components/loading.vue')
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    outPressure: {
      type: String,
      default: '7.3'
    },
    system: {
      type: String,
      default: 'hcda'
    },
    runFlag: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.setting-main{
    display: flex;
    flex-flow: row wrap;
    margin-bottom:1%;
    padding-top: 1.8rem;
    flex: 1;
    border-top: 1px solid #2a3041;
}
.setting-title{
    height: 4rem;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    flex: 1 1 100%;
}
.table-frame{
  position: relative;
  width: 100%;
}
.setting-panel{
  margin-top: 1rem;
}
.title-left{
  font-weight: bold;
    background-color: aqua;
    color: black;
    padding:0 0.5rem;
    font-size: 1.6rem;
    line-height: 4rem;
}
.title-right{
    padding: 0 0.5rem;
    font-size: 1.6rem;
    line-height: 4rem;
    font-weight: 600;
    width: 100%;
    background-color: rgba(1, 121, 197, 0.3);
}
</style>
